<%@ page language="java" pageEncoding="utf-8"%>

<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html:html lang="true">
  <head>
    <html:base />
    
    <title>zone.jsp</title>

	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
  <script  type="text/javascript">
    var xmlhttp =null;
    function  addZone(){
      //var url="../service/AddZone";
      var url="../../service/AddZone";
      var zone=document.getElementById("zone").value;
       //alert(zone);
      url+=("?zone="+zone);
      //alert(url);
      get(url,addZoneCallback);
     }
     
     function get(url,callback){
        
        if(window.ActiveXObject){
           xmlhttp=new ActiveXObject("Microsoft.XMLHttp");
        }else if(window.XMLHttpRequest){
           xmlhttp=new XMLHttpRequest();  
        } 
        xmlhttp.open("POST", url, false);
        xmlhttp.onreadystatechange = callback;
        xmlhttp.send();
       
      }
      function addZoneCallback(){
        if(xmlhttp.readyState==4){
       // alert(xmlhttp.status);
         var result=document.getElementById("result");
         if(xmlhttp.status==200){
            result.innerText="添加成功";
         }else if(xmlhttp.status==505){
            result.innerText="添加失败";
         }
         result.style.display="";
        }
      }
      function callback(){
      //alert("return");
        if(xmlhttp.readyState == 4){
       // alert(xmlhttp.responseText);
           
            var option = xmlhttp.responseXML.getElementsByTagName("option");
           // alert(option.length);
            for(var i=0;i<option.length;i++){
            var name =option.item(i).childNodes.item(0).text ;
            var value=option.item(i).childNodes.item(1).text ;
            var result=document.getElementById("zone").options.add(new Option(name,value));
            }   
        }
       }
      function   loadXML(xmlFile){    
      var xmlDoc;   
        if(window.ActiveXObject) {    
            xmlDoc=new ActiveXObject("Microsoft.XMLDOM");    
            xmlDoc.async=false;   
            xmlDoc.load(xmlFile);   
        }   
        else if(document.implementation&&document.implementation.createDocument){    
            xmlDoc=document.implementation.createDocument( "", "",null);    
            xmlDoc.async=false;   
            xmlDoc.load(xmlFile);   
        } else{   
            alert("Your   browser   cannot   handle   this   script");    
        }   
    return xmlDoc;   
}   

function test()
{
   var xmlDoc = loadXML("xml.xml");
   var car = xmlDoc.getElementsByTagName("Car");
   var top1CarName = car[0].firstChild.firstChild.firstChild.nodeValue;
      
}

     
  </script>
 <style>
body {font:12px Tahoma;margin:0px;text-align:center;background:#eee;}


#container {width:100%;height:500px;margin:0px;}


#Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}


#PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00}
#SlideBar {width:200px;height:400px;margin:0 auto;background:#CCee00;float:left;position:relative;top=-10px;}
#MainBody {width:600px;height:400px;margin:0 auto;background:#CCee55;float:left;position:relative;top=-10px;}
#Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF}

  </style>
  
  <body>
 <!--  <div style="width:900px">
   <div id="left">
         <div class="leftcolumn">
                                 商圈名称&nbsp; : <input id="zone"></input> <html:button  property="button" onclick="addZone()">添加</html:button> <div id="result" >aaa</div>
         </div>
         <div class="leftcolumn">
                                 商圈名称&nbsp; : <input id="zone"></input> <html:button  property="button" onclick="addZone()">添加</html:button> <div id="result" >aaa</div>
         </div>
    </div>
    <div class="rightcolumn">dsadsa
    </div>
   </div>
   -->
   <div id="container">　
   <div id="Header">fdsafsd</div>
　  <div id="PageBody">
　　　　<div id="SlideBar" >fdsafds</div>
　　　　<div id="MainBody" >fdsfsd</div>
　  </div>
  <div id="Footer">fdsfds</div>
</div>
  </body>
</html:html>
